<!DOCTYPE html>
<html>
	<head>
		<title>D3 Tutorial Test7 Transitions</title>
		<script src="d3.min.js"></script>
	</head>
	<body>
	
		<script type="text/javascript">
			
			var canvas = d3.select("body")
							.append("svg")
							.attr("width", 500)
							.attr("height", 500);
		
			var circle = canvas.append("circle")
								.attr("cx", 50)
								.attr("cy", 50)
								.attr("r", 25);
			
			circle.transition()
					.duration(1500)
					.delay(1000)
					.attr("cx", 150)
					.transition()
					.attr("cy", 200)
					.transition()
					.attr("cx", 50)
					.transition()
					.attr("cy", 50)
					.each("end", function() { d3.select(this).attr("fill", "red") }); // Event listener which will take the end of the transition
																					  // "start" take the start of the transition
																					  // this refers to the element (circle)
										
		</script>
	</body>
</html>